<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <div>
    <div class="mainStyle" v-loading="loading">
      <div class="treeDiv">
        <!-- <div class="treeTitle">结构化材料数据</div> -->
        <div class="treeStyle">
          <el-tree
            ref="materialTree"
            :data="treeData"
            node-key="id"
            highlight-current
            :props="defaultProps"
            default-expand-all
            :default-checked-keys="checkedKey"
            :current-node-key="0"
            icon-class="el-icon-arrow-right"
            @node-click="treeSelect"
          />
        </div>
      </div>
      <div class="rightDiv">
        <div class="queryFormDiv">
          <el-form ref="queryForm" inline class="queryForm" size="small" label-width="120px">
            <el-form-item label="名称(Name)">
              <el-input v-model="fastenerName" />
            </el-form-item>
            <div class="queryBtn">
              <el-button size="small" type="primary" icon="search" @click="handleQuery">搜索</el-button>
            </div>
          </el-form>
        </div>
        <div class="previewDiv">
          <el-form ref="resultForm" class="resultForm" inline label-width="120px" size="small">
            <el-form-item label="结果项">
              <el-select v-model="resultChooseId" @change="resultChange">
                <el-option v-for="item in resultList" :label="item.name" :value="item.name" :key="item.name"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-form ref="dataForm" inline class="dataForm" size="small" label-width="120px">
            <el-form-item label="类型Type:">
              <el-input disabled v-model="dataForm.type" />
            </el-form-item>
            <el-form-item label="名称Name:">
              <el-input disabled v-model="dataForm.name" />
            </el-form-item>
            <el-form-item label="材料Material:">
              <el-input disabled v-model="dataForm.material" />
            </el-form-item>
            <el-form-item label="标准Standard:">
              <el-input disabled v-model="dataForm.standard" />
            </el-form-item>
            <el-form-item label="说明Description:">
              <el-input disabled v-model="dataForm.description" />
            </el-form-item>
            <el-form-item label="直径D:">
              <el-input disabled v-model="dataForm.diameter" />
            </el-form-item>
            <el-form-item label="螺母直径Nut:">
              <el-input disabled v-model="dataForm.nut_diameter" />
            </el-form-item>
            <el-form-item label="长度L:">
              <el-input disabled v-model="dataForm.length" />
            </el-form-item>
            <el-form-item label="A:">
              <el-input disabled v-model="dataForm.a" />
            </el-form-item>
            <el-form-item label="H:">
              <el-input disabled v-model="dataForm.h" />
            </el-form-item>
            <el-form-item label="E:">
              <el-input disabled v-model="dataForm.e" />
            </el-form-item>
            <el-form-item label="拉力许用应力TS:">
              <el-input disabled v-model="dataForm.tension_failure_stress" />
            </el-form-item>
            <el-form-item label="剪切许用应力SS:">
              <el-input disabled v-model="dataForm.shear_failure_stress" />
            </el-form-item>
            <el-form-item label="材料修正系数Kdc:">
              <el-input disabled v-model="dataForm.kdc" />
            </el-form-item>
            <el-form-item label="钉间失稳系数C:">
              <el-input disabled v-model="dataForm.connection_factor" />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
  <script setup>
import { ref, onMounted } from 'vue';
import { getFastenerTree } from '@/api/fastener';
//左侧数结构
let treeData = ref([]);
const dataForm = ref({
  type: '',
  name: '',
  material: '',
  standard: '',
  description: '',
  diameter: '',
  nut_diameter: '',
  length: '',
  a: '',
  h: '',
  e: '',
  tension_failure_stress: '',
  shear_failure_stress: '',
  kdc: '',
  connection_factor: ''
});
//结果项下拉列表
const resultList = ref([]);
//所有数据查询结果
const queryResult = ref([]);
//结果项选择
let resultChooseId = ref('');
// 树选择节点
let selectTreeNode = ref('');
const loading = ref(true);
//默认选中节点
const defaultNode = ref({ id: '', label: '' });
// 搜索名称
const fastenerName = ref('');
const selectedNodeDataList = ref([]);
const defaultProps = {children:'children',label:'label'}
const checkedKey = ref([]);
onMounted(() => {
  loadTreeData().then(() => {
    treeSelect(defaultNode.value);
  });
  checkedKey.value = [0];
});
// tree选择事件
const treeSelect = (selected) => {
  selectTreeNode.value = selected.id;
  // 清空查询条件
  fastenerName.value = '';
  // 清空表单数据
  resetForm();
  //查询queryform的下拉选项列表
  setQueryOptionsAndResult(selected.label);
};
// 组装表单数据
const setQueryOptionsAndResult = (nodeName) => {
  const data = queryResult.value.find((item) => item.nodeName === nodeName);
  resultList.value = data.children.map((el, index) => {
    if (index === 0) {
      resultChooseId.value = el.name;
    }
    return el;
  });
  selectedNodeDataList.value = data.children;
  // 默认设置第一条数据
  dataForm.value = { ...data.children[0] };
};
const resetForm = () => {
  resultList.value = [];
  dataForm.value = {
    type: '',
    name: '',
    material: '',
    standard: '',
    description: '',
    diameter: '',
    nut_diameter: '',
    length: '',
    a: '',
    h: '',
    e: '',
    tension_failure_stress: '',
    shear_failure_stress: '',
    kdc: '',
    connection_factor: ''
  };
  resultChooseId.value = '';
};
const handleQuery = () => {
  resetForm();
  filterData();
};
//条件过滤数据
const filterData = () => {
  resultList.value = selectedNodeDataList.value.filter((el) => {
    if (el.name.indexOf(fastenerName.value) !== -1) {
      return el;
    }
  });
  resultChooseId.value = resultList.value[0].name;
  dataForm.value = { ...resultList.value[0] };
};
const resultChange = () => {
  const selectedValue = resultList.value.filter((el) => {
    return el.name === resultChooseId.value;
  });
  dataForm.value = { ...selectedValue[0] };
};
// 装载材料树数据
const loadTreeData = () => {
  loading.value = true;
  return new Promise((resolve) => {
    getTreeData().then((res) => {
      const result = res && res?.data?.children;
      // 缓存查询结果
      queryResult.value = result;
      const treeResult = processTreeData(result);
      treeData.value = treeResult;
      loading.value = false;
      resolve(treeResult);
    });
  });
};
//处理树结构数据
const processTreeData = (tree) => {
  let returnTree = [];
  returnTree.push({ label: '紧固件', id: -1, children: [] });
  if (tree?.length > 0) {
    tree.map((el, index) => {
      if (index === 0) {
        defaultNode.value = { label: el.nodeName, id: index };
      }
      returnTree[0].children.push({ label: el.nodeName, id: index });
    });
    return returnTree;
  }
};
// *******************************  接口  *****************************

// 获取金属材料库的树数据
const getTreeData = () => {
  return getFastenerTree();
};
</script>
  <style lang="scss" scoped>
.mainStyle {
  height: calc(100vh - 84px);
  display: flex;
}
.queryButtonClass {
  padding-bottom: 4px;
}
.treeDiv {
  width: 150px;
  padding-top: 10px;
  height: calc(100vh - 84px);
  overflow: auto;
  border-right: 1px solid #dddddd7a;
}
.treeStyle {
  padding-top: 10px;
}
.treeTitle {
  padding-left: 10px;
}
.preview_tableStyle {
  margin-top: 10px;
}
.previewDiv,
.queryFormDiv {
  margin-top: 10px;
  margin-right: 5px;
  .queryForm {
    border: 1px solid #dddddd7a;
    padding: 20px 20px 10px 20px;
  }
  .resultForm {
    border: 1px solid #dddddd7a;
    padding: 20px 20px 10px 20px;
  }
  .dataForm {
    border: 1px solid #dddddd7a;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 20px 20px 10px 20px;
  }
  .queryBtn {
    padding-left: 120px;
    //   margin-top: 10px;
  }
  .parameterLayout {
    span {
      display: inline-block;
      width: 80px;
      padding-left: 5px;
    }
  }
}
.rightDiv {
  flex: 1;
  overflow: auto;
  padding-top: 10px;
  margin-left: 20px;
  margin-right: 20px;
  height: calc(100vh - 84px);
}
@media (max-width: 1300px) {
  .previewDiv {
    .parameterLayout {
      :deep(.el-form-item--default .el-form-item__content) {
        width: auto;
      }
    }
  }
}

:deep(.el-form .el-form-item__label) {
  font-size: 12px;
  font-weight: normal;
}
:deep(.el-tree-node__label) {
  font-size: 12px;
  color: #606266;
}
</style>
  